<!-- 新增产品 -->
<template>
    <div class="addMask">
        <el-dialog v-model="open" :title="title" width="500">
            <el-form :model="formData" ref="formRef" label-width="110px" :rules="rules">
                <el-form-item label="产品名称：" prop="name">
                    <el-input v-model="formData.name" style="width: 300px"></el-input>
                </el-form-item>

                <el-form-item label="产品编号：" prop="no" >
                    <el-input  v-model="formData.no" style="width: 300px" :disabled="formData.id"></el-input>
                </el-form-item>

                <el-form-item label="损耗单位：" prop="measure_unit_id">
                    <el-select v-model="formData.measure_unit_id" style="width: 300px" :disabled="formData.id">
                        <el-option v-for="item in lossUnit"
                        :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="备注" prop="note">
                    <el-input v-model="formData.note" style="width: 300px"></el-input>
                </el-form-item>

                <!-- <el-form-item label="最低库存" prop="stock_min">
                    <el-input v-model="formData.stock_min" style="width: 300px"></el-input>
                </el-form-item>

                <el-form-item label="最高库存" prop="stock_max">
                    <el-input v-model="formData.stock_max" style="width: 300px"></el-input>
                </el-form-item> -->
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="danger" @click="handleDialog">取消</el-button>
                    <el-button type="primary" @click="submitForm">确认</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import api from "@/api/index.js";
import { ElMessage } from "element-plus";
const emit = defineEmits(['init'])
const open = ref<boolean>(false);
// 表单验证规则
const rules = {
    name: [
        { required: true, message: "请输入姓名", trigger: "blur" },
        { min: 2, max: 4, message: "长度在 2 到 10 个字符", trigger: "blur" }
    ],
    no: [
        { required: true, message: "请输入手机号", trigger: "blur" },
    ],
    measure_unit_id: [
        { required: true, message: "请选择状态", trigger: "change" }
    ],
};

// 通过id判断添加还是修改
const title = computed(() => {
    if (formData.value.id) {
        return "编辑产品（spu）";
    }
    return "新增产品（spu）";
})

// formData类型
interface FormData {
    id?: string;
    name: string;
    measure_unit_id: string;
    no: string;
    note: string;
    stock_min: string;
    stock_max: string;
}
// 表单数据
const formData = ref<FormData>({
    name: "",
    no: "",
    measure_unit_id: "",
    note: "",
    stock_min: "",
    stock_max: "",
});

const handleDialog = (item: FormData) => {
    console.log(item);
    if (item) {
        // 编辑时的数据处理
        formData.value = {
            id: item.id,
            name: item.name,
            no: item.no,
            note: item.note,
            measure_unit_id: item.measure_unit_id,
            stock_min: item.stock_min,
            stock_max: item.stock_max,
        };
    } else {
        // 新增时重置表单
        formData.value = {
            name: "",
            no: "",
            note: "",
            measure_unit_id: "",
            stock_min: "",
            stock_max: "",
        };
    }
    open.value = !open.value;
    getProductLists();
};
// 损耗单位
const lossUnit = ref<any[]>([]);
// 获取损耗单位
const getProductLists = async () => {
    const res = await api.publicFun.getMeasureUnitList({
        type: 2,
    });
    if (res.code === 200) {
        lossUnit.value = res.data;
        console.log(lossUnit.value);
    }
};

// 修改提交表单方法
const submitForm = async () => {

    if (formData.value.id) {
        // 编辑
        const res = await api.productbasics.editproduct(formData.value);
        if (res.code === 200) {
            ElMessage.success('编辑成功');
            emit('init');
            open.value = false;
        }
    } else {
        // 新增
        const res = await api.productbasics.addproduct(formData.value);
        if (res.code === 200) {
            ElMessage.success('新增成功');
            emit('init');
            open.value = false;
        }
    }

};

// 提交表单
const formRef = ref(null);

defineExpose({
    handleDialog,
});
</script>

<style lang="scss" scoped></style>
